<template>
  <!-- 试验计划表单弹窗 -->
  <a-modal v-bind="$attrs" v-on="$listeners" :title="headerTitle" :visible.sync="dialogVisible" @cancel="handleCancel">
    <!-- 表单 -->
    <a-form-model ref="ruleForm" :model="forms" :rules="rules" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
      <div id="dialogDistrictBox">
        <a-row>
          <a-col :span="12">
            <a-form-model-item prop="number" label="试验项目编号">
              <BaseInput disabled v-model="forms.number" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item prop="experimentProjectInfo" label="试验项目">
              <selector
                selectType="6"
                :disabled="editModel == '2'"
                placeholder="请选择试验项目"
                labelInValue
                v-model="forms.experimentProjectInfo"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" v-if="forms.experimentProjectInfo && forms.experimentProjectInfo.label.indexOf('其他') > -1">
            <a-form-model-item prop="otherExperimentProjectName" label="" class="requiredFormItem">
              <BaseInput
                style="margin-left: 20px;"
                placeholder="请输入具体的试验项目种类"
                :maxLength="30"
                :disabled="editModel == '2'"
                v-model="forms.otherExperimentProjectName"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item prop="specification" label="规格">
              <BaseInput
                placeholder="请输入规格"
                :maxLength="30"
                :disabled="editModel == '2'"
                v-model="forms.specification"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item prop="applicationPlace" label="使用部位">
              <BaseInput
                placeholder="请输入使用部位"
                :maxLength="30"
                :disabled="editModel == '2'"
                v-model="forms.applicationPlace"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item prop="experimentBasis" label="试验依据">
              <BaseInput
                placeholder="请输入试验依据"
                :maxLength="30"
                :disabled="editModel == '2'"
                v-model="forms.experimentBasis"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item prop="processInspection" label="工艺检验">
              <BaseInput
                placeholder="请输入工艺检验"
                :maxLength="30"
                :disabled="editModel == '2'"
                v-model="forms.processInspection"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item prop="siteInspectionInfo" label="现场检验">
              <selector
                selectType="63"
                :disabled="editModel == 2"
                placeholder="请选择现场检验"
                labelInValue
                v-model="forms.siteInspectionInfo"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item prop="representativeBatch" label="代表批量">
              <BaseInput
                placeholder="请输入代表批量"
                :maxLength="30"
                :disabled="editModel == '2'"
                v-model="forms.representativeBatch"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item prop="experimentContent" label="试验内容">
              <BaseInput
                placeholder="请输入试验内容"
                :maxLength="30"
                :disabled="editModel == '2'"
                v-model="forms.experimentContent"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item prop="dutyPeopleInfo" label="责任人">
              <SelectPersonByProject
                placeholder="请选择责任人"
                labelInValue
                :projectId="forms.projectId"
                :disabled="editModel == '2'"
                v-model="forms.dutyPeopleInfo"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </div>
    </a-form-model>
    <!-- 页脚操作栏 -->
    <div slot="footer" class="btn_box">
      <a-button v-if="editModel != 2" type="primary" class="button_right" @click="handleOk">提交</a-button>
      <a-button type="primary" @click="handleCancel">关闭</a-button>
    </div>
  </a-modal>
</template>

<script>
import Selector from '@/components/Select/Selector'
// import SelectDutyPeople from '@/components/Select/SelectDutyPeople'
import SelectPersonByProject from '@/components/Select/SelectPersonByProject'

import cloneDeep from 'lodash.clonedeep' // 深拷贝

export default {
  name: 'a' + Date.now(),
  components: {
    Selector,
    SelectPersonByProject
    // SelectDutyPeople,
  },
  props: {
    // 显隐控件
    visible: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 操作类型
    editModel: {
      type: [String, Number],
      default() {
        return 0
      }
    },
    // 表单
    form: {
      type: Object,
      default() {
        return null
      }
    },
    // 标题
    headerTitle: {
      type: String,
      default() {
        return ''
      }
    }
  },
  computed: {
    // 与父组件绑定visible
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      }
    }
  },
  data() {
    return {
      forms: {},
      rules: {
        otherExperimentProjectName: [{ required: true, message: '请输入具体的试验项目种类', trigger: 'change' }],
        experimentProjectInfo: [{ required: true, message: '请选择试验项目名称', trigger: 'change' }],
        specification: [{ required: true, whitespace: true, message: '请输入规格', trigger: 'change' }],
        applicationPlace: [{ required: true, whitespace: true, message: '请输入使用部位', trigger: 'change' }],
        experimentBasis: [{ required: true, whitespace: true, message: '请输入试验依据', trigger: 'change' }],
        processInspection: [{ required: true, whitespace: true, message: '请输入工艺检验', trigger: 'change' }],
        siteInspectionInfo: [{ required: true, message: '请选择现场检验', trigger: 'change' }],
        representativeBatch: [{ required: true, whitespace: true, message: '请输入代表批量', trigger: 'change' }],
        experimentContent: [{ required: true, whitespace: true, message: '请输入试验内容', trigger: 'change' }],
        dutyPeopleInfo: [{ required: true, message: '请选择责任人', trigger: 'change' }]
      }
    }
  },
  methods: {
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit('confirm', this.forms)
        } else {
          this.$message.warning("请填写完所有必填项信息")
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCancel() {
      this.dialogVisible = false
    },
  },
  watch: {
    visible(e) {
      if (e) {
        this.$nextTick(() => {
          this.forms = cloneDeep(this.form)
        })
      } else {
        this.$refs.ruleForm.clearValidate()
      }
    }
  }
}
</script>
